<template>
  <div class="home">
    <h3>父组件中的全局状态</h3>
    <h3>{{ $store.state.count }}</h3>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="sum">计算总和</button>

    <h3>计算属性操作</h3>
    <h4>{{ $store.getters.decrementOne }}</h4>
    <!-- <h4>{{$store.getters.decrementOne}}</h4> -->
    <h5>{{ $store.getters.showTime }}</h5>

    <h6>{{ $store.getters.returnFun("我是返回的方法传递的参数") }}</h6>

    <hr />

    <h3>显示用户信息</h3>
    <button @click="addUser">添加一个新用户</button>
    <h3>{{ $store.state.user }}</h3>

    <hr />

    <!-- 修改info信息 -->
    <!-- <button @click="updateInfo">添加新属性length</button> -->
    <button @click="updateInfo">修改info属性</button>

    <button @click="actionsUpdateInfo({id:777})">语法糖调用actions</button>
    <h3>{{$store.state.info}}</h3>

    <hr>
    <h3>子组件中的全局状态</h3>
    <home-son></home-son>
  </div>
</template>

<script>
// 子组件
import HomeSon from "../components/HomeSon.vue";

// mutations
import {INCREMENT,DESCREMENT} from '../store/type/mutation-type'

// actions
import {ACTIONSUPDATEINFO} from '../store/type/actions-type'

// actions的语法糖对象
import { mapActions } from 'vuex'

export default {
  name: "home",
  components: {
    HomeSon,
  },
  // 计算属性
  computed: {},
  // 函数   子凡100遍
  methods: {
    increment() {
      // this.$store.state.count++
      // 调用store.js 文件中的mutations对象中的某一个方法
      this.$store.commit(INCREMENT)
    },
    decrement() {
      // this.$store.state.count--

      // 触发方法
      this.$store.commit(DESCREMENT);
    },
    sum() {
      // 提交载荷
      // commit只允许传递两个参数
      /****
       *
       * @param {functionName}  sum  需要调用的方法
       * @param {arbitrarily} {object} 666  传递给调用的方法的实参
       *
       */
      // 无法传递第三个参数，如果非要传在对应方法中得到的值为undefined
      // this.$store.commit("sum", 666, "我继续");
      // this.$store.commit("sum", 666);
      // this.$store.commit("sum", {
      //   num:666
      // });

      // 提交风格
      this.$store.commit({
        type:'sum',//要触发的方法
        count:777 //要传递的参数
      })
    },
    addUser(){
      // 因为commit只能传递两个参数，第二个参数为函数的实参，通常可能需要传递多个值，我们可以传递一个对象
      let userInfo = {name:'ff',age:32,sex:'gay'}
      this.$store.commit('addUser',userInfo)
    },
    updateInfo(){
      // this.$store.commit('updateInfo')

      // 如果有异步操作，使用actions中的方法
      // 通过dispatch
      let id = 999;
      this.$store.dispatch(ACTIONSUPDATEINFO,{id})
    },
    ...mapActions([
      ACTIONSUPDATEINFO
    ])
  },
};
</script>
